﻿<!doctype html>
<html class="no-js" lang="">
    <head>
		<meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title> Metro | Home 1 </title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Favicon -->
		<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.png">
		
		<!-- Normalize CSS --> 
        <link rel="stylesheet" href="/css/normalize.css">

        <!-- Main CSS --> 
        <link rel="stylesheet" href="/css/main.css">

        <!-- Bootstrap CSS --> 
        <link rel="stylesheet" href="/css/bootstrap.min.css">
		
		<!-- Animate CSS --> 
		<link rel="stylesheet" href="/css/animate.min.css">

		<!-- Font-awesome CSS-->
        <link rel="stylesheet" href="/css/font-awesome.min.css">
		
		<!-- Flaticon CSS-->
		<link rel="stylesheet" type="text/css" href="/css/font/flaticon.css">
		
		<!-- Owl Caousel CSS -->
		<link rel="stylesheet" href="/css/owl.carousel.css">
		<link rel="stylesheet" href="/css/owl.theme.css">
		<link rel="stylesheet" href="/css/owl.transitions.css">
		
		<!-- Main Menu CSS -->		
        <link rel="stylesheet" href="/css/meanmenu.min.css">
		
		<!-- Nivo Slider CSS -->
		<link rel="stylesheet" href="/lib/custom-slider/css/nivo-slider.css" type="text/css" />
		<link rel="stylesheet" href="/lib/custom-slider/css/preview.css" type="text/css" media="screen" />

		<!-- Select2 CSS -->
		<link rel="stylesheet" href="/css/select2.min.css">
		
		<!-- Custom CSS -->
		<link rel="stylesheet" href="/css/style.css">

		<!-- Switch Style CSS -->
    	<link rel="stylesheet" href="/css/switch-style.css">
		
		<!-- Modernizr Js -->
        <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
         


    	<div class="wrapper-area">
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
	        <!-- Header Area Start Here -->
	        <header>
				<div class="header-area-style1" id="sticker">
					<div class="header-top">
						<div class="header-top-inner-top">
							<div class="container">
								<div class="row">
									<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
										<div class="header-contact">
											<ul>
												<li><i class="fa fa-phone" aria-hidden="true"></i><a href=""> + 123 456 7890</a></li>
												<li><i class="fa fa-envelope" aria-hidden="true"></i><a href="#"> info@metro.com</a></li>
											</ul>
										</div>
									</div>
									<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
										<div class="account-wishlist">
											<ul>
												<li><a href="login-registration.html"><i class="fa fa-lock" aria-hidden="true"></i> Account</a></li>
												<li><a href="wishlist.html"><i class="fa fa-heart-o" aria-hidden="true"></i> Wishlist</a></li>
												<li><a href="#"><i class="fa fa-usd" aria-hidden="true"></i> USD</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="header-top-inner-bottom">
							<div class="container">
								<div class="row">                         
									<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
										<div class="logo-area">
											<a href="index.html"><img class="img-responsive" src="/img/logo.png" alt="logo"></a>
										</div>
									</div>  
									<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
										<div class="search-area">
								            <div class="input-group" id="adv-search">
								                <input type="text" class="form-control" placeholder="Search Product" />
								                <div class="input-group-btn">
								                    <div class="btn-group" role="group">
								                        <div class="dropdown dropdown-lg">
								                            <button type="button" class="btn btn-metro dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
								                            	<span>All Categories</span>
								                            	<i class="fa fa-caret-up" aria-hidden="true"></i>
								                            	<i class="fa fa-caret-down" aria-hidden="true"></i>
								                            </button>
								                            <div class="dropdown-menu dropdown-menu-right" role="menu">
								                            	<ul class="sidenav-nav">
																	<li><a href="#"><i class="flaticon-dress-1"></i>Women</a></li>
																	<li><a href="#"><i class="flaticon-polo"></i>Men</a></li>
																	<li><a href="#"><i class="flaticon-plug"></i>Electornics</a></li>
																	<li><a href="#"><i class="flaticon-necklace"></i>Jewellery</a></li>
																	<li><a href="#"><i class="flaticon-screen"></i>Computer</a></li>
																	<li><a href="#"><i class="flaticon-headphones"></i>Head Phone</a></li>
																	<li><a href="#"><i class="flaticon-transport"></i>Toys</a></li>
																	<li><a href="#"><i class="flaticon-fashion"></i>Shoes</a></li>
																	<li><a href="#"><i class="flaticon-dress"></i>Kid’s Wear</a></li>
																	<li><a href="#"><i class="flaticon-technology"></i>Mobile</a></li>
																</ul>
								                            </div>
								                        </div>
								                        <button type="button" class="btn btn-metro-search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
								                    </div>
								                </div>
								            </div>
										</div>  
									</div>  
									<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
										<ul class="header-cart-area">
											<li>
												<div class="cart-area">
													<a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i><span>2</span></a>
													<ul>
														<li>
															<div class="cart-single-product">
																<div class="media">
																	<div class="pull-left cart-product-img">
																		<a href="#">
																			<img class="img-responsive" alt="product" src="/img/best-seller/4.jpg">
																		</a>
																	</div>
																	<div class="media-body cart-content">
																		<ul>
																			<li>
																				<h1><a href="#">Product Title Here</a></h1>
																				<h2><span>Code:</span> STPT600</h2>
																			</li>
																			<li>
																				<p>X 1</p>
																			</li>
																			<li>
																				<p>$49</p>
																			</li>
																			<li>
																				<a class="trash" href="#"><i class="fa fa-trash-o"></i></a>
																			</li>
																		</ul>
																	</div>
																</div>
															</div>
														</li>
														<li>
															<div class="cart-single-product">
																<div class="media">
																	<div class="pull-left cart-product-img">
																		<a href="#">
																			<img class="img-responsive" alt="product" src="/img/best-seller/5.jpg">
																		</a>
																	</div>
																	<div class="media-body cart-content">
																		<ul>
																			<li>
																				<h1><a href="#">Product Title Here</a></h1>
																				<h2><span>Code:</span> STPT460</h2>
																			</li>
																			<li>
																				<p>X 1</p>
																			</li>
																			<li>
																				<p>$75</p>
																			</li>
																			<li>
																				<a class="trash" href="#"><i class="fa fa-trash-o"></i></a>
																			</li>
																		</ul>
																	</div>
																</div>
															</div>
														</li>
														<li>
															<span><span>Sub Total</span></span><span>$124</span>
															<span><span>Discount</span></span><span>$30</span>
															<span><span>Vat(20%)</span></span><span>$18.8</span>
															<span><span>Sub Total</span></span><span>$112.8</span>
														</li>
														<li>
															<ul class="checkout">
																<li><a href="cart.html" class="btn-checkout"><i class="fa fa-shopping-cart" aria-hidden="true"></i>View Cart</a></li>
																<li><a href="check-out.html" class="btn-checkout"><i class="fa fa-share" aria-hidden="true"></i>Checkout</a></li>
															</ul>
														</li>
													</ul>
												</div>
											</li>
											<li>
												<div class="additional-menu-area" id="additional-menu-area">
													<div id="mySidenav" class="sidenav">
														<a href="#" class="closebtn">×</a>
														<div class="sidenav-search">
															<div class="input-group stylish-input-group">
											                    <input type="text" placeholder="Search Here . . ." class="form-control">
											                    <span class="input-group-addon">
											                        <button type="submit">
											                            <span class="glyphicon glyphicon-search"></span>
											                        </button>  
											                    </span>
											                </div>
														</div>
														<ul class="sidenav-login-registration">
															<li  data-toggle="collapse" data-target="#login" class="collapsed">
												              <a href="#">Login<span class="arrow"></span></a>
												            <div class="collapse" id="login">
																<div class="login-registration-field">
																    <form method="post">
																        <label>Username or email address *</label>
																        <input type="text">
																        <label>Password *</label>
																        <input type="password">
																        <button value="Login" type="submit" class="btn-side-nav disabled">Login</button>
																    </form>
																</div>
												            </div>
												        </li>
												            <li  data-toggle="collapse" data-target="#registration" class="collapsed">
												              <a href="#">Registration<span class="arrow"></span></a>
												            <div class="collapse" id="registration">
																<div class="login-registration-field">
																    <form method="post">
																    	<label>User Name*</label>
																        <input type="text">
																        <label>E-mail address *</label>
																        <input type="email">
																        <label>Password *</label>
																        <input type="password">
																        <button value="Login" type="submit" class="btn-side-nav disabled">Register</button>
																    </form>
																</div>
												            </div>
												        </li>
														</ul>
														<h3 class="ctg-name-title">Category Name List</h3>
														<ul class="sidenav-nav">
															<li><a href="shop1.html"><i class="flaticon-dress-1"></i>Women</a></li>
															<li><a href="shop2.html"><i class="flaticon-polo"></i>Men</a></li>
															<li><a href="shop3.html"><i class="flaticon-plug"></i>Electornics</a></li>
															<li><a href="shop4.html"><i class="flaticon-necklace"></i>Jewellery</a></li>
															<li><a href="shop5.html"><i class="flaticon-screen"></i>Computer</a></li>
															<li><a href="shop6.html"><i class="flaticon-headphones"></i>Head Phone</a></li>
															<li><a href="shop7.html"><i class="flaticon-transport"></i>Toys</a></li>
															<li><a href="shop1.html"><i class="flaticon-fashion"></i>Shoes</a></li>
															<li><a href="shop2.html"><i class="flaticon-dress"></i>Kid’s Wear</a></li>
															<li><a href="shop3.html"><i class="flaticon-technology"></i>Mobile</a></li>
														</ul><!-- times-->
													</div>
													<span class="side-menu-open side-menu-trigger"><i class="fa fa-bars" aria-hidden="true"></i></span>
												</div> 
											</li>
										</ul>
									</div> 
								</div>
							</div>
						</div>
					</div>
					<div class="header-bottom">
						<div class="container">
							<div class="row">                         
								<div class="col-lg-3 col-md-3 col-sm-4">
									<h2 class="category-menu-title close-on-tab"><a href="#"><i class="fa fa-bars" aria-hidden="true"></i></a>Categories</h2> 
									<div class="logo-area">
										<a href="index.html"><img class="img-responsive" src="/img/logo.png" alt="logo"></a>
									</div>
								</div> 
								<div class="col-lg-9 col-md-9 col-sm-8">
									<div class="main-menu-area">
										<nav>
											<ul>
												<li class="active"><a href="#">Home</a>
													<ul>
														<li><a class="active" href="index.html">Home 1</a></li>
														<li><a href="index2.html">Home 2</a></li>
														<li><a href="index3.html">Home 3</a></li>
														<li><a href="index4.html">Home 4</a></li>
													</ul>	
												</li>
												<li><a href="about.html">About</a></li>
												<li><a href="#">Blog</a>
													<ul>
														<li><a href="blog.html">Blog</a></li>
														<li><a href="single-blog.html">Single Blog</a></li>
													</ul>	
												</li>
												<li><a href="#">Pages</a>
													<ul class="mega-menu-area">
														<li>
															<a href="index.html">Home 1</a>
															<a href="index2.html">Home 2</a>
															<a href="index3.html">Home 3</a>
															<a href="index4.html">Home 4</a>
														</li>	
														<li>
															<a href="about.html">About Us</a>
															<a href="blog.html">Blog</a>
															<a href="single-blog.html">Single Blog 2</a>
															<a href="portfolio1.html">Portfolio 1</a>
														</li>	
														<li>
															<a href="portfolio2.html">Portfolio 2</a>
															<a href="wishlist.html">Wishlist</a>
															<a href="shop1.html">Shop 1</a>
															<a href="shop2.html">Shop 2</a>
														</li>
														<li>
															<a href="shop3.html">Shop 3</a>
															<a href="shop4.html">Shop 4</a>
															<a href="shop5.html">Shop 5</a>
															<a href="shop6.html">Shop 6</a>
														</li>
														<li>
															<a href="shop7.html">Shop 7</a>
															<a href="product-details1.html">Product Details 1</a>
															<a href="product-details2.html">Product Details 2</a>
															<a href="login-registration.html">Login Registration</a>
														</li>
														<li>
															<a href="cart.html">Cart</a>
															<a href="check-out.html">Check Out</a>
															<a href="404.html">404</a>
															<a href="contact.html">Contact</a>
														</li>	
													</ul>											
												</li> 
												<li><a href="contact.html">Contact</a></li>
											</ul>
										</nav>
									</div>
								</div> 
							</div> 
						</div>
						<!-- Mobile Menu Area Start Here -->
						<div class="mobile-menu-area">
							<div class="container">
								<div class="row">
									<div class="col-md-12">
										<div class="mobile-menu">
											<nav id="dropdown">
												<ul>
													<li class="active"><a href="#">Home</a>
														<ul>
															<li><a href="index.html">Home 1</a></li>
															<li><a href="index2.html">Home 2</a></li>
															<li><a href="index3.html">Home 3</a></li>
															<li><a href="index4.html">Home 4</a></li>	
														</ul>	
													</li>
													<li><a href="about.html">About</a></li>
													<li><a href="#">Blog</a>
														<ul>
															<li><a href="blog.html">Blog</a></li>
															<li><a href="single-blog.html">Single Blog</a></li>
														</ul>	
													</li>
													<li><a href="#">Portfolio</a>
														<ul>
															<li><a href="portfolio1.html">Portfolio 1</a></li>
															<li><a href="portfolio2.html">Portfolio 2</a></li>
														</ul>	
													</li>
													<li><a href="#">Shop</a>
														<ul>
															<li><a href="shop1.html">Shop 1</a></li>
															<li><a href="shop2.html">Shop 2</a></li>
															<li><a href="shop3.html">Shop 3</a></li>
															<li><a href="shop4.html">Shop 4</a></li>
															<li><a href="shop5.html">Shop 5</a></li>
															<li><a href="shop6.html">Shop 6</a></li>
															<li><a href="shop7.html">Shop 7</a></li>
															<li><a href="product-details1.html">Shop Details 1</a></li>
															<li><a href="product-details2.html">Shop Details 2</a></li>
														</ul>	
													</li>
													<li><a href="#">Pages</a>
														<ul>
															<li><a href="login-registration.html">Login Registration</a></li>
															<li><a href="cart.html">Cart</a></li>
															<li><a href="wishlist.html">Wishlist</a></li>
															<li><a href="check-out.html">Check Out</a></li>
															<li><a href="404.html">404</a></li>	
														</ul>											
													</li> 
													<li><a href="contact.html">Contact</a></li>
												</ul>
											</nav>
										</div>          
									</div>
								</div>
							</div>
						</div>
						<!-- Mobile Menu Area End Here -->
					</div>
				</div>
	        </header>
	        <!-- Header Area End Here -->
	        <!-- Slider Area Start Here -->
			<div class="slider-area">
				<div class="container">
					<div class="row">                         
						<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
							<div class="category-menu-area close-on-tab" id="category-menu-area">
								<ul>
									<li><a href="/shop1"><i class="flaticon-dress-1"></i>Women<span><i class="flaticon-next"></i></span></a>
										<ul class="dropdown-menu">
											<li><a href="#">Women Sub Title 1</a></li>
											<li><a href="#">Women Sub Title 2</a></li>
											<li><a href="#">Women Sub Title 3</a></li>
											<li><a href="#">Women Sub Title 4</a></li>
											<li><a href="#">Women Sub Title 5</a></li>
										</ul>
									</li>
									<li><a href="shop2.html"><i class="flaticon-polo"></i>Men<span><i class="flaticon-next"></i></span></a>
										<ul class="dropdown-menu">
											<li><a href="#">Men Sub Title 1</a></li>
											<li><a href="#">Men Sub Title 2</a></li>
											<li><a href="#">Men Sub Title 3</a></li>
											<li><a href="#">Men Sub Title 4</a></li>
											<li><a href="#">Men Sub Title 5</a></li>
										</ul>
									</li>
									<li><a href="shop3.html"><i class="flaticon-plug"></i>Electornics<span><i class="flaticon-next"></i></span></a>
										<ul class="dropdown-menu">
											<li><a href="#">Electornics Sub Title 1</a></li>
											<li><a href="#">Electornics Sub Title 2</a></li>
											<li><a href="#">Electornics Sub Title 3</a></li>
											<li><a href="#">Electornics Sub Title 4</a></li>
											<li><a href="#">Electornics Sub Title 5</a></li>
										</ul>
									</li>
									<li><a href="shop4.html"><i class="flaticon-necklace"></i>Jewellery<span><i class="flaticon-next"></i></span></a>
										<ul class="dropdown-menu">
											<li><a href="#">Jewellery Sub Title 1</a></li>
											<li><a href="#">Jewellery Sub Title 2</a></li>
											<li><a href="#">Jewellery Sub Title 3</a></li>
											<li><a href="#">Jewellery Sub Title 4</a></li>
											<li><a href="#">Jewellery Sub Title 5</a></li>
										</ul>
									</li>
									<li><a href="shop5.html"><i class="flaticon-screen"></i>Computer<span><i class="flaticon-next"></i></span></a>
										<ul class="dropdown-menu">
											<li><a href="#">Computer Sub Title 1</a></li>
											<li><a href="#">Computer Sub Title 2</a></li>
											<li><a href="#">Computer Sub Title 3</a></li>
											<li><a href="#">Computer Sub Title 4</a></li>
											<li><a href="#">Computer Sub Title 5</a></li>
										</ul>
									</li>
									<li><a href="shop6.html"><i class="flaticon-headphones"></i>Head Phone<span><i class="flaticon-next"></i></span></a>
										<ul class="dropdown-menu">
											<li><a href="#">Head Phone Sub Title 1</a></li>
											<li><a href="#">Head Phone Sub Title 2</a></li>
											<li><a href="#">Head Phone Sub Title 3</a></li>
											<li><a href="#">Head Phone Sub Title 4</a></li>
											<li><a href="#">Head Phone Sub Title 5</a></li>
										</ul>
									</li>
									<li><a href="shop1.html"><i class="flaticon-transport"></i>Toys<span><i class="flaticon-next"></i></span></a>
										<ul class="dropdown-menu">
											<li><a href="#">Toys Sub Title 1</a></li>
											<li><a href="#">Toys Sub Title 2</a></li>
											<li><a href="#">Toys Sub Title 3</a></li>
											<li><a href="#">Toys Sub Title 4</a></li>
											<li><a href="#">Toys Sub Title 5</a></li>
										</ul>
									</li>
									<li><a href="shop1.html"><i class="flaticon-fashion"></i>Shoes<span><i class="flaticon-next"></i></span></a>
										<ul class="dropdown-menu">
											<li><a href="#">Shoes Sub Title 1</a></li>
											<li><a href="#">Shoes Sub Title 2</a></li>
											<li><a href="#">Shoes Sub Title 3</a></li>
											<li><a href="#">Shoes Sub Title 4</a></li>
											<li><a href="#">Shoes Sub Title 5</a></li>
										</ul>
									</li>
									<li><a href="shop1.html"><i class="flaticon-dress"></i>Kid’s Wear<span><i class="flaticon-next"></i></span></a>
										<ul class="dropdown-menu">
											<li><a href="#">Kid’s Wear Sub Title 1</a></li>
											<li><a href="#">Kid’s Wear Sub Title 2</a></li>
											<li><a href="#">Kid’s Wear Sub Title 3</a></li>
											<li><a href="#">Kid’s Wear Sub Title 4</a></li>
											<li><a href="#">Kid’s Wear Sub Title 5</a></li>
										</ul>
									</li>
									<li><a href="shop1.html"><i class="flaticon-technology"></i>Mobile<span><i class="flaticon-next"></i></span></a>
										<ul class="dropdown-menu">
											<li><a href="#">Mobile Sub Title 1</a></li>
											<li><a href="#">Mobile Sub Title 2</a></li>
											<li><a href="#">Mobile Sub Title 3</a></li>
											<li><a href="#">Mobile Sub Title 4</a></li>
											<li><a href="#">Mobile Sub Title 5</a></li>
										</ul>
									</li>
								</ul>								
							</div> 
						</div> 
						<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
							<div class="main-slider1">
								<div class="bend niceties preview-2">
									<div id="ensign-nivoslider-2" class="slides">	
										<img src="/img/slider-1/slider-2.jpg" alt="" title="#slider-direction-1"  />
										<img src="/img/slider-1/slider-2.jpg" alt="" title="#slider-direction-2"  />
									</div>				
									<!-- direction 1 -->
									<div id="slider-direction-1" class="slider-direction">
										<div class="slider-content t-lfl s-tb slider-1">
											<div class="title-container s-tb-c">
												<h2>Collection</h2>
												<h2 class="title1">2016</h2>
												<h3 class="title3">Summer Dress</h3>
												<p>Simply dummy text of the printing and typesetting industrstandard dummy since.</p>
												<a href="#" class="btn-shop-now-fill-slider">View Collections</a>
											</div>
										</div>
										<!-- layer 1 -->
										<div class="layer-1-1">
											<img src="/img/slider-1/layer-1.png" alt="" />
										</div>
									</div>
									<!-- direction 2 -->
									<div id="slider-direction-2" class="t-cn slider-direction">
										<!-- layer 1 -->
										<div class="layer-1">
											<img src="/img/slider-1/layer2-4.png" alt="" />
										</div>
										<!-- layer 2 -->
										<div class="layer-2">
											<img src="/img/slider-1/layer2-5.png" alt="" />
										</div>
										<!-- layer 3 -->
										<div class="layer-3">
											<img src="/img/slider-1/layer2-6.png" alt="" />
										</div>
									</div>
								</div>
							</div>
						</div> 
					</div>  
				</div>  
			</div>  
			<!-- Slider Area End Here -->
			<!-- Services1 滑动框下面的三个图片 -->
			<div class="services1-area">
				<div class="container">
					<div class="row">
						<div th:each="product,iterStat : ${products}" th:if="${iterStat.index<3}" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
							<div class="services-area-box">
								<div class="media">
									<a class="pull-left" href="#">
										<!-- 使用动态图片 URL -->
										<img th:src="${product.picture}" th:alt="${product.name}" class="img-responsive">
									</a>
									<div class="media-body">
										<span th:text="${product.name}">Product Name</span>
										<h3><a href="#" th:text="${product.name}">Brand Name</a></h3>
										<p th:text="${product.description}">Description</p>
										<a href="#" class="btn-shop-now">Shop Now<i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
									</div>
								</div>
							</div>
						</div>
					</div>  
				</div>  
			</div>  
			<!-- Services1 三个图片到此结束 -->
			<!-- Product Area 产品展示的页面 -->
			<div class="product-area">
				<div class="container" id="home-isotope">
<!--					售卖的三个选项 没图片-->
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<div class="isotop-classes-tab myisotop1"> 
								<a href="#" data-filter=".on-sale" class="current">On Sale</a>
								<a href="#" data-filter=".featured">Featured</a>
								<a href="#" data-filter=".popular">Popular</a>
							</div>
						</div>
					</div>
<!--					展示商品-->
					<div class="row featuredContainer">
						<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 on-sale" th:each="product,iterStat : ${products}" th:if="${iterStat.index<8}">
							<div class="product-box1">
								<ul class="product-social">
									<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
									<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
									<li><a href="#" data-toggle="modal" data-target="#myModal"  th:data-product-id="${product.productId}"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
								</ul>
								<div class="product-img-holder">
									<a href="#"><img th:src="${product.picture}" th:alt="${product.name}"></a>
								</div>
								<div class="product-content-holder">
									<h3><a href="#" th:text="${product.name}">Product Title Here</a></h3>
									<span th:text="'￥'+${product.price}">price</span>
								</div>
							</div>
						</div>
					</div>
				</div>  
			</div>  
			<!-- Product Area End Here -->
			<!-- Offer打折娘们 -->
			<div class="offer-area1 hidden-after-desk">
				<div class="container">
					<div class="row"> 
						<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
							<div class="brand-area-box-l">
								<span>Winter Collections</span>
								<h2>50% Off</h2>
								<p>Sale Going On</p>
								<a href="#" class="btn-shop-now-fill">Shop Now</a>
							</div>
						</div> 
						<div id="countdown"></div>
						<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
							<div class="brand-area-box-r">
								<a href="#"><img src="/img/offer.png" alt="offer"></a>
							</div>
						</div> 
					</div>  
				</div>  
			</div>  
			<!-- Offer 打折结束了 -->
			<!-- Best Seller展示区-->
			<div class="best-seller-area padding-top-0-after-desk">
				<div class="container">
					<div class="row">                         
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<h2 class="title-carousel">Best Seller</h2>
						</div>
					</div> 
					<div class="row">                         
						<div class="best-seller-carousel" id="best-seller-carousel">                         
							<div class="best-seller-box">
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/1.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span><span></span>$59.00</span>
										</div> 
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/2.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span>$82.00</span>
										</div> 
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/3.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span>$97.00</span>
										</div> 
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="best-seller-box">
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/4.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span>$68.00</span>
										</div>
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/5.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span><span>$53.00</span>$39.00</span>
										</div>
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/6.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span><span>$89.00</span>$79.00</span>
										</div>
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="best-seller-box">
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/7.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span>$19.00</span>
										</div>
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/8.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span><span>$50.00</span>$30.00</span>
										</div>
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/9.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span>$63.00</span>
										</div>
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="best-seller-box">
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/3.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span>$50.00</span>
										</div>
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/3.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span><span>$41.00</span>$31.00</span>
										</div> 
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/3.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span>$84.00</span>
										</div> 
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="best-seller-box">
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/4.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span>$33.00</span>
										</div> 
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/5.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span>$48.00</span>
										</div> 
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
								<div class="media">
									<a href="#" class="pull-left">
										<img alt="best-seller" src="/img/best-seller/6.jpg" class="img-responsive">
									</a>
									<div class="media-body">
										<div class="best-seller-box-content">
											<h3><a href="#">Product Title Here</a></h3>
											<span><span>$79.00</span>$40.00</span>
										</div> 
										<ul class="best-seller-box-cart">
											<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
							</div>
						</div> 
					</div> 
				</div>  
			</div>  
			<!-- Best Seller 展示区结束 -->
			<!-- Advantage Area 优势区 -->
			<div class="advantage1-area">
				<div class="container">
					<div class="row">                         
						<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
							<div class="advantage-area-box">
								<div class="media">
									<a class="pull-left" href="#">
										<i class="flaticon-truck"></i>
									</a>
									<div class="media-body">
										<h3>FREE SHIPPING</h3>
										<p>On All Orders</p>
									</div>
								</div>
							</div>
						</div> 
						<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
							<div class="advantage-area-box">
								<div class="media">
									<a class="pull-left" href="#">
										<i class="flaticon-headphones"></i>
									</a>
									<div class="media-body">
										<h3>24/7 SERVICE</h3>
										<p>Get Help When You Need</p>
									</div>
								</div>
							</div>
						</div> 
						<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
							<div class="advantage-area-box">
								<div class="media">
									<a class="pull-left" href="#">
										<i class="flaticon-reload"></i>
									</a>
									<div class="media-body">
										<h3>100% MONEY BACK</h3>
										<p>Within 30 Day Guarantee</p>
									</div>
								</div>
							</div>
						</div> 
					</div>  
				</div>  
			</div>  
			<!-- Advantage Area End Here -->
			<!-- Blog Area 这是博客区 -->
			<div class="blog1-area">
				<div class="container">
					<div class="row">                         
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<h2 class="title-carousel">Latest Blog</h2>
						</div>
					</div> 
					<div class="row">                         
						<div class="blog-carousel carousel-margin" id="blog-carousel">                         
							<div class="blog-box">
								<a href="#"><span><i class="fa fa-chevron-right" aria-hidden="true"></i></span></a>
								<div class="blog-img-holder">
									<div class="post-date">
										<span>25 June</span>
									</div>
									<a href="#"><img src="/img/blog/1.jpg" alt="blog"></a>
								</div>
								<div class="blog-content-holder">
									<h3><a href="#">Blog Title Goes Here</a></h3>
									<ul class="solid-underline">
										<li><span>by</span> Admin</li>
										<li>Comments (03)</li>
									</ul>
									<p>Simply dummy text of the printing and typety esetting industryr drem Ipsum has been thety standard dummy since.</p>
								</div>
							</div>
							<div class="blog-box">
								<a href="#"><span><i class="fa fa-chevron-right" aria-hidden="true"></i></span></a>
								<div class="blog-img-holder">
									<div class="post-date">
										<span>25 June</span>
									</div>
									<a href="#"><img src="/img/blog/2.jpg" alt="blog"></a>
								</div>
								<div class="blog-content-holder">
									<h3><a href="#">Blog Title Goes Here</a></h3>
									<ul class="solid-underline">
										<li><span>by</span> Admin</li>
										<li>Comments (08)</li>
									</ul>
									<p>Simply dummy text of the printing and typety esetting industryr drem Ipsum has been thety standard dummy since.</p>
								</div>
							</div>
							<div class="blog-box">
								<a href="#"><span><i class="fa fa-chevron-right" aria-hidden="true"></i></span></a>
								<div class="blog-img-holder">
									<div class="post-date">
										<span>25 June</span>
									</div>
									<a href="#"><img src="/img/blog/3.jpg" alt="blog"></a>
								</div>
								<div class="blog-content-holder">
									<h3><a href="#">Blog Title Goes Here</a></h3>
									<ul class="solid-underline">
										<li><span>by</span> Admin</li>
										<li>Comments (10)</li>
									</ul>
									<p>Simply dummy text of the printing and typety esetting industryr drem Ipsum has been thety standard dummy since.</p>
								</div>
							</div>
							<div class="blog-box">
								<a href="#"><span><i class="fa fa-chevron-right" aria-hidden="true"></i></span></a>
								<div class="blog-img-holder">
									<div class="post-date">
										<span>25 June</span>
									</div>
									<a href="#"><img src="/img/blog/1.jpg" alt="blog"></a>
								</div>
								<div class="blog-content-holder">
									<h3><a href="#">Blog Title Goes Here</a></h3>
									<ul class="solid-underline">
										<li><span>by</span> Admin</li>
										<li>Comments (09)</li>
									</ul>
									<p>Simply dummy text of the printing and typety esetting industryr drem Ipsum has been thety standard dummy since.</p>
								</div>
							</div>
							<div class="blog-box">
								<a href="#"><span><i class="fa fa-chevron-right" aria-hidden="true"></i></span></a>
								<div class="blog-img-holder">
									<div class="post-date">
										<span>25 June</span>
									</div>
									<a href="#"><img src="/img/blog/2.jpg" alt="blog"></a>
								</div>
								<div class="blog-content-holder">
									<h3><a href="#">Blog Title Goes Here</a></h3>
									<ul class="solid-underline">
										<li><span>by</span> Admin</li>
										<li>Comments (05)</li>
									</ul>
									<p>Simply dummy text of the printing and typety esetting industryr drem Ipsum has been thety standard dummy since.</p>
								</div>
							</div>
							<div class="blog-box">
								<a href="#"><span><i class="fa fa-chevron-right" aria-hidden="true"></i></span></a>
								<div class="blog-img-holder">
									<div class="post-date">
										<span>25 June</span>
									</div>
									<a href="#"><img src="/img/blog/3.jpg" alt="blog"></a>
								</div>
								<div class="blog-content-holder">
									<h3><a href="#">Blog Title Goes Here</a></h3>
									<ul class="solid-underline">
										<li><span>by</span> Admin</li>
										<li>Comments (03)</li>
									</ul>
									<p>Simply dummy text of the printing and typety esetting industryr drem Ipsum has been thety standard dummy since.</p>
								</div>
							</div>
						</div> 
					</div> 
				</div>  
			</div>  
			<!-- Blog Area End Here -->
			<!-- Solid Divider滑动装逼的那个-->
			<div class="container">
				<div class="row">                         
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
						<div class="solid-divider"></div>	
					</div>
				</div>
			</div>	
			<!-- Solid Divider Area End Here -->
			<!-- Brand 这是品牌区域 -->
			<div class="brand-area ">
				<div class="container">
					<div class="row">                         
						<div class="brand-carousel" id="brand-carousel"> 
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/1.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/2.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/3.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/4.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/5.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/6.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/1.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/2.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/3.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/4.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/5.jpg" alt="brand"></a>
							</div>
							<div class="brand-area-box">
								<a href="#"><img src="/img/brand/6.jpg" alt="brand"></a>
							</div>
						</div>  
					</div>  
				</div>  
			</div>  
			<!-- Brand Area 品牌的腚 -->
			<!-- Footer 这是页脚 -->
	        <footer>
				<div class="footer-area">
					<div class="footer-area-top">
						<div class="container">
							<div class="row">
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
									<div class="footer-box">
										<h3>Information</h3>
										<ul class="info-list">
											<li><a href="about.html">About us</a></li>
											<li><a href="#">Customer Service</a></li>
											<li><a href="#">Manufacturers</a></li>
											<li><a href="#">Privacy policy</a></li>
											<li><a href="#">Terms & condition</a></li>
											<li><a href="blog.html">Blog</a></li>
										</ul>
									</div>
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
									<div class="footer-box">
										<h3>My Account</h3>
										<ul class="info-list">
											<li><a href="login-registration.html">My Account</a></li>
											<li><a href="login-registration.html">Login</a></li>
											<li><a href="wishlist.html">Order History</a></li>
											<li><a href="wishlist.html">Wish List</a></li>
											<li><a href="/cart">View Cart</a></li>
											<li><a href="/blog">Latest Post</a></li>
										</ul>
									</div>
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
									<div class="footer-box">
										<h3>Product Tag</h3>
										<ul class="tag-list">
											<li><a href="#">Winter</a></li>
											<li><a href="#">Fashion</a></li>
											<li><a href="#">Bag</a></li>
											<li><a href="#">Denime</a></li>
											<li><a href="#">Summer Style</a></li>
											<li><a href="#">Leather</a></li>
											<li><a href="#">Dress</a></li>
											<li><a href="#">Dress</a></li>
											<li><a href="#">Summer Style</a></li>
											<li><a href="#">Leather</a></li>
										</ul>
									</div>
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
									<div class="footer-box">
										<h3>Stay With Us</h3>
										<p>Tmply dummy text of the printing and typesetting industry nummy ever.</p>
										<ul class="footer-social">
											<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
											<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
										</ul>										
										<div class="newsletter-area">
											<h3>NewsLetter Sign Up!</h3>
											<div class="input-group stylish-input-group">
							                    <input type="text" class="form-control" placeholder="E-mail . . .">
							                    <span class="input-group-addon">
							                        <button type="submit">
							                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
							                        </button>  
							                    </span>
							                </div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="footer-area-bottom">
						<div class="container">
							<div class="row">
								<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
									<p>© 2016 Metro All Rights <a href="http://www.bootstrapmb.com/">Reserved</a>. Designed by<a href="" target="_blank"> RadiusTheme</a></p>
								</div>
								<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
									<ul class="payment-method">
										<li><a href="#"><img src="/img/payment-method1.jpg" alt="payment-method"></a></li>
										<li><a href="#"><img src="/img/payment-method2.jpg" alt="payment-method"></a></li>
										<li><a href="#"><img src="/img/payment-method3.jpg" alt="payment-method"></a></li>
										<li><a href="#"><img src="/img/payment-method4.jpg" alt="payment-method"></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
	        </footer>
	        <!-- Footer Area End Here -->
		</div>
		<!-- Modal 小眼睛的详情页面-->
		<<!-- Product Modal -->
		<div id="myModal" class="modal fade" role="dialog">
			<div class="modal-dialog">
				<div class="modal-body">
					<button type="button" class="close myclose" data-dismiss="modal">&times;</button>
					<div class="product-details1-area">
						<div class="product-details-info-area">
							<div class="row">
								<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
									<div class="inner-product-details-left">
										<div class="tab-content">
											<div id="related1" class="tab-pane fade active in">
												<a class="zoom ex1" href="#"><img id="image1" class="img-responsive" src="" alt="single"></a>
											</div>
											<!-- Placeholder for additional images if needed -->
										</div>
										<!-- Thumbnail navigation can be added here if multiple images are available -->
									</div>
								</div>
								<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
									<div class="inner-product-details-right">
										<h3 id="product-title">Product Title Here</h3>
										<!-- Rating system can be included here if needed -->
										<p id="price">$59.00</p>
										<p id="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
										<div class="product-details-content">
											<p><span>SKU:</span> <span id="sku">0010</span></p>
											<p><span>Availability:</span> <span id="availability">In stock</span></p>
											<p><span>Category:</span> <span id="category">Demo Products</span></p>
										</div>
										<ul class="product-details-social">
											<li>Share:</li>
											<li><a href="#"><i aria-hidden="true" class="fa fa-facebook"></i></a></li>
											<li><a href="#"><i aria-hidden="true" class="fa fa-twitter"></i></a></li>
											<li><a href="#"><i aria-hidden="true" class="fa fa-linkedin"></i></a></li>
											<li><a href="#"><i aria-hidden="true" class="fa fa-pinterest"></i></a></li>
										</ul>
										<ul class="inner-product-details-cart">
											<li><a href="#">Add To Cart</a></li>
											<li>
												<div class="input-group quantity-holder" id="quantity-holder">
													<input type="text" placeholder="1" value="1" class="form-control quantity-input" name="quantity">
													<div class="input-group-btn-vertical">
														<button type="button" class="btn btn-default quantity-plus"><i aria-hidden="true" class="fa fa-plus"></i></button>
														<button type="button" class="btn btn-default quantity-minus"><i aria-hidden="true" class="fa fa-minus"></i></button>
													</div>
												</div>
											</li>
											<li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Modal Dialog Box End Here-->
		<!-- Style Switch Start Here -->
		<link id="switch_style" href="#" rel="stylesheet" type="text/css">
		<div class="style-switch left" id="switch-style">
			<a id="toggle-switcher" class="switch-button" title="Change Styles">
				<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
			</a>
			<div class="switched-options">
				<div class="config-title">Style Switcher</div>      
				<ul class="list-unstyled styles">
					<li><a href="#" title="black" class="black color" id="black"></a></li>
					<li><a href="#" title="amber" class="amber color" id="amber"> </a></li>
					<li><a href="#" title="blue-grey" class="blue-grey color" id="blue-grey"> </a></li>
					<li><a href="#" title="blue" class="blue color" id="blue"> </a></li>
					<li><a href="#" title="cyan" class="cyan color" id="cyan"> </a></li>
					<li><a href="#" title="deep orange" class="deep-orange color" id="deep-orange"> </a></li>
					<li><a href="#" title="deep-purle" class="deep-purle color" id="deep-purle"> </a></li>
					<li><a href="#" title="green" class="green color" id="green"> </a></li>
					<li><a href="#" title="indigo" class="indigo color" id="indigo"> </a></li>
					<li><a href="#" title="light-blue" class="light-blue color" id="light-blue"> </a></li>
					<li><a href="#" title="light-green" class="light-green color" id="light-green"></a></li>
					<li><a href="#" title="lime" class="lime color" id="lime"></a></li>
					<li><a href="#" title="orange" class="orange color" id="orange"></a></li>
					<li><a href="#" title="palette" class="palette color" id="palette"></a></li>
					<li><a href="#" title="pink" class="pink color" id="pink"></a></li>
					<li><a href="#" title="purple" class="purple color" id="purple"></a></li>
					<li><a href="#" title="red" class="red color" id="red"></a></li>
					<li><a href="#" title="teal" class="teal color" id="teal"></a></li>
				</ul>
			</div>
		</div>
		<!-- Style Switch End Here -->
		<!-- Preloader Start Here -->
	    <div id="preloader"></div>
	    <!-- Preloader End Here -->
	    <!-- jquery-->	
        <script src="/js/vendor/jquery-2.2.4.min.js" type="text/javascript"></script>
        
		<!-- Bootstrap js -->
        <script src="/js/bootstrap.min.js" type="text/javascript"></script>

     	<!-- Owl Cauosel JS -->
		<script src="/js/owl.carousel.min.js" type="text/javascript"></script>

		<!-- Nivo slider js -->
		<script src="/lib/custom-slider/js/jquery.nivo.slider.js" type="text/javascript"></script>
		<script src="/lib/custom-slider/home.js" type="text/javascript"></script>
		
		<!-- Meanmenu Js -->
		<script src="/js/jquery.meanmenu.min.js" type="text/javascript"></script>

		<!-- WOW JS -->		
        <script src="/js/wow.min.js" type="text/javascript"></script>

		<!-- Plugins js -->
        <script src="/js/plugins.js" type="text/javascript"></script>

        <!-- Countdown js -->
        <script src="/js/jquery.countdown.min.js" type="text/javascript"></script>

		<!-- Srollup js -->
		<script src="/js/jquery.scrollUp.min.js" type="text/javascript"></script>

		<!-- Isotope js -->
		<script src="/js/isotope.pkgd.min.js" type="text/javascript"></script>

		<!-- Switch js -->
     	<script src="/js/switch-style.js" type="text/javascript"></script>
        
        <!-- Custom Js -->
        <script src="/js/main.js" type="text/javascript"></script>
<!-- 关于操作的js-->
		<script src="/js/action.js" type="text/javascript"></script>
    </body>
</html>
